<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
		<title>样式表</title>
		<link rel="icon" href="../img/favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
		<style>
		        .modal-content {
		            width: 60%;
		            margin: 0 auto;
		            position: absolute;
		            top: 50%;
		            left: 50%;
		            transform: translate(-50%, -50%);
		        }
		        .logo{
		            width: 200px;
		            height: 200px;
		            margin:-120px auto 0;
		            padding: 1px;
		            position: relative;
		            background: #ffffff;
		            border: 1px solid yellow;
		            border-radius: 50%;
		        }
		        .circle {
		            width: 150px;
		            height: 150px;
		            position: absolute;
		            top: 50%;
		            left: 50%;
		            transform: translate(-50%, -50%);
		            overflow: hidden;
		            border-radius: 50%;
					border: 1px solid yellow;
		        }
		        .circle img{
		            width: 150px;
		            height: 150px;
		        }
				.modal-header{
					border: none;
				}
		        .modal-footer{
		            border-top: none;
		        }
		        .formpic{
		            display: inline-block;
		            top: 30px;
		            left: 6px;
		            position: relative;
		            color: #ccc;
		        }
		        .form-control{
		            padding-left: 25px;
		        }
		    </style>
		</head>
		<body>
		<div class="container">
		    <button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">登录</button>
		</div>
		<div class="modal fade" id="myModal">
		    <div class="modal-content">
		        <div class="modal-header">
		            <button class="close" type="button" data-dismiss="modal">&times;</button>
		            <div class="logo">
		            <div class="circle"><img src="../img/kebi.png"..."></div>
		            </div>
		        </div>
		        <div class="modal-body">
		            <form class="form-horizontal" id="table">
		                <div class="form-group">
		                    <label for="inputEmail3" class="col-sm-2 control-label" style="margin-top: 20px">用户：</label>
		                    <div class="col-sm-10">
		                        <i class="glyphicon glyphicon-user formpic"></i>
		                        <input type="email" class="form-control" id="inputEmail3" placeholder="请输入用户名">
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label for="inputPassword3" class="col-sm-2 control-label" style="margin-top: 20px">密码：</label>
		                    <div class="col-sm-10 clearfix">
		                        <i class="glyphicon glyphicon-lock formpic"></i>
		                        <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
		                    </div>
		                </div>
		            </form>
		        </div>
		        <div class="modal-footer">
		            <button type="button" class="btn btn-primary btn-default" data-dismiss="modal">登录</button>
		            <button type="button" class="btn" id="chongzhi">重置</button>
		        </div>
		    </div>
		</div>
		<script src="../js/jquery-3.4.1.js"></script>
		<script src="../js/bootstrap.js"></script>
		<script>
		    $(function() {
		        let modal = $('#myModal');
		        modal.modal('show');
		        $('#chongzhi').click(function() {
		            $('#table')[0].reset();
		        });
		        modal.on('hidden.bs.modal', function(e) {
		            console.log('模态框隐藏结束');
		            $.get('https://kh-qg.oss-cn-hangzhou.aliyuncs.com/json/info.json', function(res) {
		                console.log(res);
		            });
		        });
		    });
		</script>
		</body>
		</html>